<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/02-reset.css">
    <link rel="stylesheet" href="css/deta.css">
    <style>
        .box1 {
            width: 100%;
            height: 50px;
            background-color: #e9ccd3;
            box-sizing: border-box;
            min-width: 1200px;
        }

        .box1 ul {
            width: 1000px;
            height: 50px;
            float: right;

        }

        .box1 ul li {
            float: left;
        }

        .box1 ul li a {
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            width: 200px;
            height: 50px;
        }

        .box1 p {
            float: left;
            font-size: 20px;
            line-height: 50px;
            margin-left: 100px;
            min-width: 100px;
        }

        .box1 ul li a:hover {
            background-color: #b598a1;
        }

        .midd {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .midd>img {
            width: 400px;
            height: 400px;
        }

        .midd .mask {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, .7);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 105%;
            top: 0;
            overflow: hidden;
            display: none;
            z-index: 111111111;
        }
        .big>img {
            /* 遮罩/中盒子 = 大盒子/大图 */
            width: 1600px;
            height: 1600px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="./index.html">
            <p>京东</p>
        </a>
        <ul>
            <li><a href="./login.html" class="login">登录</a></li>
            <li><a href="./resgiter.html" class="logup">注册</a></li>
            <li><a href="./mycat.html">我的订单</a></li>
            <li><a href="./list.html">商品列表</a></li>
            <li><a href="./my.html">个人中心</a></li>
        </ul>
    </div>
    
        <div class="boxtop">
            <span style="margin-left: 100px;"><a href="./index.html" style="color: red;">首页</a> | 当前页面 ></span>
            <span class="bspanx" style="cursor: pointer;">
                商品列表 >
            </span>
            <span>
                内衣配饰
            </span>
        </div>
        <div class="fang">
                <div class="midd">
                    <img src="" alt="">
                    <div class="mask">
                    </div>
                    <div class="big">
                        <img src="" alt="">
                    </div>
           <div class="fangdibu">
               <div class="active">
                <img src="" alt="">
               </div>
               <div class="dctive">
                <img src="" alt="">
               </div>
               <div class="cctive">
                <img src="" alt="">
               </div>
               <div class="bctive">
                <img src="" alt="">
               </div>
           </div>
        </div>
        <div class="fangyou">
            <span class="youa"></span>
            <div class="fangcent">
                <a>京 东 价</a>
                <i></i>
                <b style="color: blue;cursor: pointer;margin-left: 10px;font-size: 14px;">降价通知</b>
                <br>
                <div style="margin-bottom: 10px;"></div>
                <a>优 惠 卷</a>
                <img src="images/1.png" alt="" style="width: 200px;height: 30px;">
                <br>
                <div style="margin-bottom: 10px;"></div>
                <a>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</a>
                <b style="border: 1px solid red;font-size: 14px;color: red;padding: 2px;">限购</b>
                <a>购买1-3件时享受单价￥<a class="aa"></a></a>
            </div>
            <div class="summary_appreciation">
                
                </div>
                <div class="summary_delivery">
                    <div>配送至</div>
                    <div>
                        <select name="" id="">
                            <option value="">广州白云区</option>
                        </select>
                    </div>
                    <div><span><a>有货</a></span><span><a>支持</a></span></div>
                </div>
                <div class="summary_color">
                    <div>选择颜色</div>
                    <ul>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                    </ul>
                </div>
                <div class="summary_size">
                    <div>选择尺码</div>
                    <ul>
                        <li><a>105/L</a></li>
                        <li><a>110/XL</a></li>
                        <li><a>115/XXL</a></li>
                        <li><a>120/3XL</a></li>
                        <li><a>95/S</a></li>
                        <li><a>125/4XL</a></li>
                        <li><a>100/M</a></li>
                    </ul>
                </div>
                <div class="summary_safeguard">
                    <div><a>增值保障</a></div>
                    <div><a>年意外换新，¥29.00</a>半</div>
                    <div><a>意外破洞保，¥7.9</a></div>
                </div>
                <div class="summary_server">
                    <div><a>京东服务</a></div>
                    <div><a>洗衣2件，¥46.00</a></div>
                    <div><a>裤长改短1件，¥15.00</a></div>
                    <div><a>鞋靴修复翻新，¥46.00</a></div>
                </div>
                <div class="summary_bar">
                    <div><a>白条分期</a></div>
                    <div><a>不分期</a></div>
                    <div><a>3期</a></div>
                    <div><a>6期</a></div>
                    <div><a>12期</a></div>
                    <div><a>24期</a></div>
                </div>
                <div style="margin: 10px;">
                    <img src="images/3.png" alt="" style="width: 100px;height: 20px;">
                    <span>无忧售后，放心选购（具体可享受服务以售后申请页为准）</span>
                </div>
               <input type="number" value="1" style="float: left;">
               <div style="float: left; width: 100px;height: 40px;background-color: red;margin-top: 10px;text-align: center;line-height: 40px;margin-left: 100px;float: left;">
                   <a style="color: white;cursor: pointer;" class="bhref">加入到购物车</a>
               </div>
               <a href="mycat.html" style="float: left;margin-top: 30px;margin-left: 20px;color: blue;">去购物车结算</a>
        </div>
    
    <div class="dibu">

    </div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/utils.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="js/daetail.js"></script>
<script>
    var username = getCookie('username')
    if (username) {
        var loginLi = document.querySelector('.login')
        var mtbott = document.querySelector('.mright .mttop .mtbott')
        loginLi.innerHTML = `
       <li><a href ="./my.html">欢迎用户${username}</a></li>
       `
        var logup = document.querySelector('.logup')
        logup.innerHTML = `
       <a href = "javascript:;" class="logout">登出</a>
       `

        //登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
        <li><a href="./login.html" class="login">登录</a></li>
       `
           
            //删除cookie
            removeCookie('username')
        }
    }

    var bspan = document.querySelector('.bspanx')
    bspan.onclick = function(){
        location.href = 'list.html'
    }

     
    var bigimg = document.querySelector('.midd .big img')
    var middbox = document.querySelector('.midd')
    var bigbox = document.querySelector('.midd .big')
    var mask = document.querySelector('.midd .mask')

    middbox.onmouseover = function(){
        //显示大盒子和遮罩
        bigbox.style.display = mask.style.display = 'block'
        //获取事件对象
        var a = window.event
        //获取宽高
        var x = a.pageX
        var y = a.pageY
        //计算遮罩需要移动的距离
        var left = x - mask.offsetWidth / 2 - middbox.offsetLeft
        var t = y - mask.offsetHeight / 2 - middbox.offsetTop
        //限制范围
        if(left < 0){
            left = 0
        }
        if(t < 0){
            t = 0
        }
        if(left > middbox.offsetWidth - mask.offsetWidth){
            left = middbox.offsetWidth - mask.offsetWidth
        }
        if(t > middbox.offsetHeight - mask.offsetHeight){
            t = middbox.offsetHeight - mask.offsetHeight
        }
        //赋值给遮罩
        mask.style.left = left + 'px'
        mask.style.top = t + 'px'

        //计算大盒子图片需要移动的位置
        var bigleft = -left / middbox.clientWidth * bigimg.clientWidth
        var bigtop = -t / middbox.clientHeight * bigimg.clientHeight
        //赋值给大图片
        bigimg.style.left = bigleft + 'px'
        bigimg.style.top = bigtop + 'px'
    }

    middbox.onmouseout = function(){
        //隐藏大盒子和遮罩
        bigbox.style.display = mask.style.display = 'none'
    }
</script>

</html>